<template lang="pug">
  .foot-menu-app-newtpl.animated.bounceInUp(ref="footWrap")
    Scene
    .content
      .top
        .item(@click="handleClick(item)", v-for="(item,index) in filterMenu", :key="index", :class='["opt-" + item.title, {active: item.isActive}]')
          .icon
            i.iconfont(:class="item.icon")
      .bottom
        .item(@click="handleClickBottomMenu(item)", v-for="(item,index) in getBottomMenu", :key="index", :class='["opt-" + item.title, {active: item.isActive}]')
          .icon
            i.iconfont(:class="item.icon")

    van-action-sheet(v-model="sheets", :actions="actions", @cancel="sheetCancel", cancel-text="取消")
      
</template>

<script>
import Scene from 'Comps/Scene/app/index'
import { handleToolsBar } from '@/utils/menu'
import { mapGetters } from 'vuex'
import menuMixin from '@/mixins/menu'
import { handleCustomMenu } from '@/utils/menu'

export default {
  mixins: [menuMixin],

  data() {
    return {
      midMenuList: null,
      bottomMenuList: [{
          icon: 'icon-lianjie1',
          name: 'link-opt',
          active: false
        },{
          icon: 'icon-tuwen',
          name: 'article-opt',
          active: false
        },{
          icon: 'icon-weibiaoti-3',
          name: 'map-opt',
          active: false
        },{
          icon: 'icon-dianhua',
          name: 'tel-opt',
          active: false
        }]
    }
  },
  mounted() {
    this.bottomMenuList = this.$CONFIG.bottomMenuE
  },
  computed: {
    ...mapGetters([
      'panoInfo',
      'worksData',
      'navGuideData'
    ]),
    filterMenu() {
      if (this.worksData && this.navGuideData) {
        this.midMenuList = this.$CONFIG.footMidMenuE
        if(this.worksData.length == 0) {
          this.midMenuList = this.midMenuList.filter(item => item.title != 'works')
        }
        if(this.navGuideData.length == 0) {
          this.midMenuList = this.midMenuList.filter(item => item.title != 'navguide')
        }
        return this.midMenuList
      }
    },
  },
  methods: {
    handleClickBottomMenu(item) {
      handleCustomMenu(item)
    },
    handleClick(item) {
      handleToolsBar(item)
    },
  },
  components: {
    Scene,
  },
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/mixin.styl'
.foot-menu-app-newtpl
  position absolute
  bottom 0
  left 0
  z-index 99
  width 100%
  .content
    .top
      text-align center
      display flex
      justify-content space-around
      align-items center
      padding 0 40px
      .item
        &.opt-scene,&.opt-navguide
          &.active
            .icon
              i
                color #9c0
        &.opt-navguide
          .icon
            i
              font-size 30px
        .icon
          line-height 44px
          width 30px
          i
            font-size 26px
            text-shadow 0 0 10px rgba(0, 0, 0, 0.4)
            color #fff
    .bottom
      text-align center
      .item
        display inline-block
        margin 0 13px
        .icon
          line-height 44px
          width 30px
          i
            font-size 22px
            text-shadow 0 0 10px rgba(0, 0, 0, 0.4)
            color #fff
</style>
